<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Trang thanh toán</title>
<link rel="stylesheet" type="text/css" href="css/payment.css">
<link rel="stylesheet" type="text/css" href="css/form_new.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<script src="scripts/jcarousellite_1.js"> </script>
<script src="scripts/qtip/jquery.qtip-1.0.0-rc3.js"> </script>

<link rel="stylesheet" type="text/css" href="scripts/facebox/src/facebox.css" />
<script language="javascript" src="scripts/facebox/src/facebox.js"></script>

</head>
<body>

<div id="page">
    <div class="layout-main-shortcuts">
        <div class="logo"></div>
        <div class="support_online"><a href="#">Hỗ trợ trực tuyến</a></div>
    </div>
    <div class="main_page">
        <div class="text_payment_online">Thanh toán trực tuyến với Bảo Kim đảm bảo</div>
        <div class="table_payment">
            <div class="border_top"></div>
            <div class="center_table_payment">
            
                <div class="border_left"></div>
                
                <div class="payment_area">
                    <div class="left_col">
                    
                       <div class="infomation_payment bg_infomation_customer">
                         <table width="720" border="0" cellspacing="0">
                              <tr>
                                <td colspan="2" class="top_infomation_product" width="360">
                                     Thông tin thanh toán
                                    <span class="detail_change"><a href="facebox_infomation_payment.php" rel="facebox">Chi tiết / Thay đổi</a></span>
                                </td>
                                <td colspan="2" class="top_infomation_product" width="360">Thông tin người nhận tiền</td>
                              </tr>
                              <tr>
                                <td width="128" class="label_product">Tên sản phẩm</td>
                                <td width="195" class="product_info"><b>Áo đôi hình chuối dễ thương</b> </td>
                                <td colspan="2" class="label_customer "><b>Công ty TNHH Hoàn Hảo</b></td>
                              </tr>
                              <tr>
                                <td class="label_product">Số lượng</td>
                                <td class="product_info"><b>1 đôi</b> </td>
                                <td width="188" class="label_customer">Người đại diện <b> ( Đã xác thực)</b></td>
                                <td width="201" class="customer_info">Nguyễn Văn Linh </td>
                              </tr>
                              <tr>
                                <td class="label_product">Hình thức thanh toán</td>
                                <td class="product_info"><b> Đảm bảo </b> ( tạm giữ 3 ngày )</td>
                                <td class="label_customer">Email</td>
                                <td class="customer_info">linhnv@lauxanh.vn</td>
                              </tr>
                              <tr>
                                <td colspan="2" rowspan="2" class="sumary_money">
                                     <ul>
                                        <li>Tổng số tiền thanh toán</li>
                                        <li>120.000 VNĐ</li>
                                    </ul>
                                </td>
                                <td class="label_customer">Điện thoại</td>
                                <td class="customer_info">0900000001</td>
                              </tr>
                              <tr>
                                <td class="label_customer">Website</td>
                                <td class="customer_info">www.ohlala.com.vn</td>
                              </tr>
                            </table>
                       </div>
                        
                        <div class="text_method_payment">
                            <span>Chọn phương thức thanh toán</span>
                        </div>
                        
                        <div class="method_payment">
                        
                            <div class="methods_payment">
                                <button class="prev"><span></span></button>
                                <div class="anyClass">
                                    <ul>
                                        <li class="li_using_baokim_account selected" val="using_baokim_account">
                                            <div class="icon_baokim"></div>
                                            <div class="text_baokim">Sử dụng tài khoản Bảo Kim</div>
                                        </li>
                                        <li class="li_mobile_scratch_cards " val="mobile_scratch_cards">
                                            <span class="icon_sim"></span>
                                            <span class="text_sim">Thẻ cào điện thoại</span>
                                        </li>
                                        <li class="li_international_credit_cards" val="international_credit_cards">
                                            <span class="icon_credit"></span>
                                            <span class="text_credit">Thẻ tín dụng quốc tế</span>
                                        </li>
                                        <li class="li_banks_dosmestic" val="banks_dosmestic">
                                            <span class="icon_bank"></span>
                                            <span class="text_bank">Ngân hàng trong nước</span>
                                        </li>
                                        <li  class="li_offline_payment" val="offline_payment">
                                            <span class="icon_payment"></span>
                                            <span class="text_payment">Thanh toán Offline</span>
                                        </li>
                                    </ul>
                                </div>
                                <button class="next_2"><span></span></button>
                            </div>
                            
                            <div class="detail_method">
                                <div class="using_baokim_account" id="using_baokim_account"><?php  include('using_baokim_account.php');?> </div>
                                <div id="mobile_scratch_cards" class="using_baokim_account"><?php  include('mobile_scratch_cards.php');?> </div>
                                <div id="international_credit_cards" class="using_baokim_account"><?php  include('international_credit_cards.php');?> </div>
                                <div id="banks_dosmestic" class="using_baokim_account"><?php  include('banks_dosmestic.php');?> </div>
                                <div id="offline_payment" class="using_baokim_account"><?php  include('offline_payment.php');?> </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    <div class="right_col">
                        <div class="bk_certificate"></div>
                        <div class="select_method_payment">
                            <span>1.</span>
                            <span>Chọn phương thức thanh toán</span>
                        </div>
                        <div class="text_select_method">Bạn cần chọn phương thức sẽ sử dụng để thanh toán đơn hàng</div>
                        
                    </div>
                </div>
                
                <div class="border_right"></div>  
               
            </div>
            <div class="border_bottom"></div>
        </div>
    </div>
</div>
  
</body>
</html>

<script type="text/javascript">
  $(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next_2",
        btnPrev: ".prev",
        visible: 4,
    });
    
    $("button.next_2").click(function(){
        $("button.prev").show();
        $("button.next_2").hide();
//        $(".li_mobile_scratch_cards").css("border-left","1px solid #cdcdcd");
        $("#offline_payment").css('border-right','none');
        
//        $(".li_offline_payment").css('border-right','none');
//        $(".li_offline_payment").css('width','152px');
//        
//        $(".li_using_baokim_account").css('border-left','none');
    });
    
    $("button.prev").click(function(){
        $("button.next_2").show();
        $("button.prev").hide();
        $(".li_mobile_scratch_cards").css("border-left","none");
        $("#offline_payment").css('border-right','1px solid #cdcdcd');
        
//        $(".li_offline_payment").css('width','151px');
//        $(".li_using_baokim_account").css('border-left','1px #cdcdcd solid');
    });
    $(".methods_payment ul li").click(function(){
        $(".methods_payment ul li").removeClass('selected');
        $(this).addClass('selected');
        
        var val=$(this).attr('val');
        if(val!=='using_baokim_account'){
            $(".selected").css("border-left",'none');
        }
        
        $("#using_baokim_account").hide();
        $("#mobile_scratch_cards").hide();
        $("#international_credit_cards").hide();
        $("#banks_dosmestic").hide();
        $("#offline_payment").hide();
        
        $("#"+val+"").show();
        
    })  ;
    
    $(document).ready(function() {
        $('a[rel*=facebox]').facebox();
    })
    
  }); 
    
</script>  
